<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/element-ui.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="lib/wangEditor/wangEditor.min.js"></script>
	<script src="lib/jquery.md5.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="lib/element-ui.css"/>
	<link rel="stylesheet" type="text/css" href="css/newask.css"/>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>

	<title>发布题解</title>
</head>
<body>
<div id="app">
	<header>
		<div class="header">
			<div><a href="/"><img class="img-logo" src="lib/logo1.png" alt=""></a></div>
			<div class="plane-login">
				<div v-show="islogin==0">
					<a href="#" @click="showLoginWindow=true">登录</a> | <a href="register.html">注册</a>
				</div>
				<div v-show="islogin==1">
					<el-menu :default-active="menuActiveIndex" class="el-menu-demo" mode="horizontal">
						<el-submenu index="2">
							<template slot="title"><img
									src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt=""
									class="nav-avatar" style="font-weight: bold">{{loginInfo.username}}
							</template>
							<el-menu-item index="2-1">个人中心</el-menu-item>
							<el-menu-item index="2-2">设置</el-menu-item>
							<el-menu-item index="2-3" @click="exit">退出登录</el-menu-item>
						</el-submenu>
					</el-menu>
				</div>
			</div>
		</div>
	</header>
	<main>
		<div class="content">
			<h2>发布评语</h2>
			<div class="plane-askForm">
				<!--				<el-input v-model="askform.title" class="input-title" maxlength="30" placeholder="题解名称"-->
				<!--				          show-word-limit></el-input>-->

				<div id="mainEdit"></div>

				<div class="plane-btn">
					<!--                    <el-link type="info">保存草稿</el-link>-->
					<el-button type="primary" @click="sendPost">发布评语</el-button>
				</div>
			</div>

		</div>
		<transition name="el-zoom-in-center">
			<div class="window-plane-login" v-show="showLoginWindow">
				<div class="box-mask"></div>
				<div class="box-login">
					<div class="plane-login-title">
						<div><b>登录账户</b></div>
						<div @click="closeLoginPlane"><i class="el-icon-close close"></i></div>
					</div>
					<div class="box-login-form">
						<div class="form-item">
							<el-input v-model="form.username" name="username" placeholder="账号"></el-input>
						</div>
						<div class="form-item">
							<el-input v-model="form.password" name="password" placeholder="密码" show-password></el-input>
						</div>
						<div class="form-item form-set-right">
							<a href="#">忘记密码</a> | <a href="#">无法登录</a>
						</div>
						<div class="form-item form-set-right">
							<el-button type="primary" @click="login">登录</el-button>
						</div>
					</div>
				</div>
			</div>
		</transition>
	</main>
	<script>
        (function ($) {
            $.getUrlParam = function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
        })(jQuery);


        var vue = new Vue({
            el: '#app',
            mounted() {
                this.init()
            },
            data: {
                userOb: {},
                askform: {
                    content: '',
                    user_id: '',
                    problem_id: ''
                },
                form: {
                    username: '',
                    password: ''
                },
                menuActiveIndex: 1,
                islogin: 0,
                loginInfo: {},
                showLoginWindow: false
            },
            methods: {
                init() {
                    var that = this;
                    $.get('/user/loginInfo', function (data) {
                        if (data != 0) {
                            that.loginInfo = JSON.parse(data);
                            that.islogin = 1;
                        }
                    });
                },
                sendPost() {
                    let that = this;
                    $.post('/comment/add',
                        {
                            comment_user_id: that.loginInfo.id,
                            comment_content: htmlEncode(editor.txt.html()),
                            answer_id: $.getUrlParam('answer')
                        }, function (data) {

                            let obj = JSON.parse(data);
                            if (obj.code === '1') {
                                that.$message({type: 'success', message: obj.msg});
                            } else {
                                that.$message({type: 'error', message: obj.msg});
                            }
                            setTimeout(function () {
                                window.location.href = "/";
                            }, 2000);
                        });
                },
                login() {
                    let that = this;
                    $.post('/login', {username: that.form.username, password: that.form.password}, function (data) {
                        that.userOb = data;
                        let msg = null;
                        if (that.userOb.code === '1') {
                            if (that.userOb.role === 1) {
                                msg = '管理员:' + that.userOb.username + '  ' + that.userOb.msg;
                            } else {
                                msg = that.userOb.msg;
                            }
                            that.$message({type: 'success', message: msg});
                            setTimeout(function () {
                                window.location.reload();
                            }, 1000);
                        } else {
                            that.$message({type: 'error', message: that.userOb.msg});
                        }

                    }, "json");
                },
                exit() {
                    let that = this;
                    $.get('/user/logout', function (data) {
                        if (data === '1') {
                            that.$message({message: '已退出'});
                            setTimeout(function () {
                                window.location.reload();
                            }, 1000);
                        } else {
                            that.$message({type: 'error', message: '退出失败'});
                        }
                    })
                },
                closeLoginPlane() {
                    this.showLoginWindow = false;
                }
            }
        });
        var E = window.wangEditor;
        var editor = new E('#mainEdit');
        editor.customConfig.uploadImgShowBase64 = true;
        editor.customConfig.zIndex = 100;
        editor.create();

        function htmlEncode(value) {
            return $('<div/>').text(value).html();
        }

        //Html解码获取Html实体
        function htmlDecode(value) {
            return $('<div/>').html(value).text();
        }
	</script>
</div>
</body>
</html>